package com.chris.homecare.screens
{
	import com.chris.homecare.components.BreadcrumbComponenet;
	import com.chris.homecare.components.EventPopupComonent;
	import com.chris.homecare.components.HeaderComponent;
	import com.chris.homecare.components.renderers.NameListRenderer;
	import com.chris.homecare.data.EventData;
	import com.chris.homecare.data.GlobalVariables;
	import com.chris.homecare.screens.events.CalenderScreen;
	import com.chris.homecare.screens.events.CategoryEventsListScreen;
	import com.chris.homecare.screens.events.CategoryListScreen;
	import com.chris.homecare.screens.events.EventsListScreen;
	import com.chris.homecare.utils.CommonUtils;
	
	import feathers.controls.Button;
	import feathers.controls.LayoutGroup;
	import feathers.controls.List;
	import feathers.controls.PickerList;
	import feathers.controls.Screen;
	import feathers.controls.ScreenNavigator;
	import feathers.controls.ScreenNavigatorItem;
	import feathers.controls.renderers.IListItemRenderer;
	import feathers.core.PopUpManager;
	import feathers.data.ListCollection;
	import feathers.layout.AnchorLayout;
	import feathers.layout.AnchorLayoutData;
	import feathers.layout.VerticalLayout;
	import feathers.motion.transitions.ScreenSlidingStackTransitionManager;
	
	import starling.core.Starling;
	import starling.display.DisplayObject;
	import starling.display.Quad;
	import starling.events.Event;
	import starling.events.Touch;
	import starling.events.TouchEvent;
	import starling.events.TouchPhase;
	
	public class EventsScreen extends Screen
	{
		private var header:HeaderComponent;
		private var breadcrumbComp:BreadcrumbComponenet;

		private var monthsArray:Array = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
		private var yearsArray:Array = ["2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021","2022", "2023", "2024", "2025", "2026", "2027", "2028", "2029", "2030"];
		
		private var monthYearGroup:LayoutGroup;
		private var monthPicker:PickerList;
		private var yearPicker:PickerList;

		private var currentDate:Date;
		

		private var gappingQuad:Quad;

		private var dataScreen:ScreenNavigator;
		private var transitionManager:ScreenSlidingStackTransitionManager;
		
		private static const CALENDER_SCREEN:String = "calenderScreen";
		private static const EVENT_LIST_SCREEN:String = "eventListScreen";
		private static const EVENT_CATEGORY_SCREEN:String = "eventCategoryScreen";
		private static const EVENT_CATEGORY_EVENT_SCREEN:String = "eventCategoryEventScreen";

		private var eventPopupComp:EventPopupComonent;
		private var eventCalenderButton:Button;
		private var eventListButton:Button;
		private var eventCateogoryButton:Button;
		
		public function EventsScreen()
		{
			currentDate = new Date();
			CommonUtils.eventCurrentMonth = currentDate.month;
			CommonUtils.eventCurrentYear = currentDate.fullYear;
			
			addEventListener("showDetailEvent", showEventPopup);
		}
		
		override protected function initialize():void
		{
			this.layout = new VerticalLayout();
			
			header = new HeaderComponent();
			addChild(header);
			
			breadcrumbComp = new BreadcrumbComponenet("Events");
			addChild(breadcrumbComp);
			
			monthYearGroup = new LayoutGroup();
			monthYearGroup.height = 80*CommonUtils.scaleValue;
			monthYearGroup.layout = new AnchorLayout();
			addChild(monthYearGroup);
			
			monthPicker = new PickerList();
			monthPicker.customButtonName = "plain-icon-btn";
			monthPicker.dataProvider = new ListCollection(monthsArray);
			monthPicker.addEventListener(Event.CHANGE, onPickerVauleChanged);
			monthPicker.selectedIndex = CommonUtils.eventCurrentMonth;
			monthPicker.x = monthPicker.y = 10*CommonUtils.scaleValue;
			monthPicker.listFactory = function():List
			{
				var list:List = new List();
				list.itemRendererFactory = function ():IListItemRenderer
				{
					var renderer:NameListRenderer = new NameListRenderer();
					return renderer;
				};
				return list;
			}
			monthYearGroup.addChild(monthPicker);
			
			yearPicker = new PickerList();
			yearPicker.customButtonName = "plain-icon-btn";
			yearPicker.dataProvider = new ListCollection(yearsArray);
			yearPicker.addEventListener(Event.CHANGE, onPickerVauleChanged);
			yearPicker.selectedIndex = yearsArray.indexOf(currentDate.fullYear.toString());
			yearPicker.listFactory = function():List
			{
				var list:List = new List();
				list.itemRendererFactory = function ():IListItemRenderer
				{
					var renderer:NameListRenderer = new NameListRenderer();
					return renderer;
				};
				return list;
			}
			monthYearGroup.addChild(yearPicker);
			
			eventCalenderButton = new Button();
			eventCalenderButton.nameList.add("event-cal-btn");
			eventCalenderButton.addEventListener(Event.TRIGGERED, onEventDisplayTypeChange);
			monthYearGroup.addChild(eventCalenderButton);
			
			eventListButton = new Button();
			eventListButton.nameList.add("event-list-btn");
			eventListButton.addEventListener(Event.TRIGGERED, onEventDisplayTypeChange);
			monthYearGroup.addChild(eventListButton);

			eventCateogoryButton = new Button();
			eventCateogoryButton.nameList.add("event-cat-btn");
			eventCateogoryButton.addEventListener(Event.TRIGGERED, onEventDisplayTypeChange);
			monthYearGroup.addChild(eventCateogoryButton);
			
			var yearLayoutData:AnchorLayoutData = new AnchorLayoutData();
			yearLayoutData.leftAnchorDisplayObject = monthPicker;
			yearLayoutData.left = 15*CommonUtils.scaleValue;
			yearLayoutData.verticalCenter = 0;
			yearPicker.layoutData = yearLayoutData;
			
			var categoryLayoutData:AnchorLayoutData = new AnchorLayoutData();
			categoryLayoutData.right = 0;
			categoryLayoutData.verticalCenter = 0;
			eventCateogoryButton.layoutData = categoryLayoutData;
			
			var listLayoutData:AnchorLayoutData = new AnchorLayoutData();
			listLayoutData.rightAnchorDisplayObject = eventCateogoryButton;
			listLayoutData.right = 30*CommonUtils.scaleValue;
			listLayoutData.verticalCenter = 0;
			eventListButton.layoutData = listLayoutData;
			
			var calLayoutData:AnchorLayoutData = new AnchorLayoutData();
			calLayoutData.rightAnchorDisplayObject = eventListButton;
			calLayoutData.right = 30*CommonUtils.scaleValue;
			calLayoutData.verticalCenter = 0;
			eventCalenderButton.layoutData = calLayoutData;
			
			dataScreen = new ScreenNavigator();
			addChild(dataScreen);
			dataScreen.addScreen(CALENDER_SCREEN, new ScreenNavigatorItem(CalenderScreen));
			dataScreen.addScreen(EVENT_LIST_SCREEN, new ScreenNavigatorItem(EventsListScreen));
			dataScreen.addScreen(EVENT_CATEGORY_SCREEN, new ScreenNavigatorItem(CategoryListScreen,
				{
					"cagegoryChange": onCategoryChange
				}
			));
			dataScreen.addScreen(EVENT_CATEGORY_EVENT_SCREEN, new ScreenNavigatorItem(CategoryEventsListScreen));
			dataScreen.showScreen(CALENDER_SCREEN);
			
			transitionManager = new ScreenSlidingStackTransitionManager(dataScreen);
			transitionManager.duration = 0.6;
			
			super.initialize();
		}
		
		override protected function draw():void
		{
			var stageWidth:int = stage.stageWidth;
			var stageHeight:int = stage.stageHeight;
			
			monthYearGroup.width = stageWidth - 20;
			dataScreen.width = stageWidth;
			dataScreen.height = stageHeight - (header.height + breadcrumbComp.height + monthYearGroup.height);
			super.draw();
		}
		
		private function onCategoryChange(event:Event):void
		{
			if(event.data)
			{
				GlobalVariables.choosenEventCategory = event.data.id;
				dataScreen.showScreen(EVENT_CATEGORY_EVENT_SCREEN);
			}
		}
		
		private function onEventDisplayTypeChange(event:Event):void
		{
			if(Button(event.target).name == "event-cal-btn")
			{
				dataScreen.showScreen(CALENDER_SCREEN);
				
				monthPicker.includeInLayout = monthPicker.visible = true;
				yearPicker.includeInLayout = yearPicker.visible = true;
			}
			
			else if(Button(event.target).name == "event-list-btn")
			{
				dataScreen.showScreen(EVENT_LIST_SCREEN);
				
				monthPicker.includeInLayout = monthPicker.visible = false;
				yearPicker.includeInLayout = yearPicker.visible = false;
			}
			
			else if(Button(event.target).name == "event-cat-btn")
			{
				dataScreen.showScreen(EVENT_CATEGORY_SCREEN);
				
				monthPicker.includeInLayout = monthPicker.visible = false;
				yearPicker.includeInLayout = yearPicker.visible = false;
			}
		}
		
		private function onPickerVauleChanged(event:Event):void
		{
			if(!yearPicker || !monthPicker) return;

			monthPicker.closeList();
			yearPicker.closeList();
			CommonUtils.eventCurrentMonth = monthsArray.indexOf(monthPicker.selectedItem);
			CommonUtils.eventCurrentYear = int(yearPicker.selectedItem);
			if(dataScreen) 
			{
				CalenderScreen(dataScreen.activeScreen).repopulateDates();
			}
				
		}
		
		private function showEventPopup(event:Event):void
		{
			if(eventPopupComp) return;

			var eventData:EventData = event.data as EventData;
			
			eventPopupComp = new EventPopupComonent(eventData);
			eventPopupComp.addEventListener(Event.COMPLETE, onCloseEventPopup);
			
			PopUpManager.forStarling(Starling.current).addPopUp(eventPopupComp, true, true, function():DisplayObject
			{
				var quad:Quad = new Quad(100, 100, 0x000000);

				quad.addEventListener(TouchEvent.TOUCH, touchOuter);
				quad.alpha = 0.75;
				return quad;
			});
		}
		
		private function onCloseEventPopup(event:Event):void
		{
			event.target.removeEventListener(TouchEvent.TOUCH, touchOuter);
			eventPopupComp.removeFromParent(true);
			eventPopupComp = null;
		}		
		
		private function touchOuter(event:TouchEvent):void
		{
			var touch:Touch = event.getTouch(event.target as DisplayObject, TouchPhase.BEGAN);
			if (touch)
			{
				event.target.removeEventListener(TouchEvent.TOUCH, touchOuter);
				eventPopupComp.removeFromParent(true);
				eventPopupComp = null;
			}
		}
		
	}
}